<!--
 * FilePath     : \src\components\dynamicTable\dynamicColumn.vue
 * Author       : 马超
 * Date         : 2024-10-29 11:23
 * LastEditors  : 郭鹏超
 * LastEditTime : 2024-12-29 17:41
 * Description  : 表头组件
 * CodeIterationRecord: 
 -->
<template>
  <div class="dynamic-column">
    <!--文字 -->
    <div v-if="item.columnAttribute.style == 'text'">
      <div v-html="scopeRow[item.columnAttribute.prop]"></div>
    </div>
    <div v-if="item.columnAttribute.style == 'input'">
      <el-input class="w-100%!" v-model="scopeRow[item.columnAttribute.prop]"></el-input>
    </div>
    <div v-if="item.columnAttribute.style == 'datetime'">
      <el-date-picker
        class="w-100%!"
        v-model="scopeRow[item.columnAttribute.prop]"
        type="datetime"
        :clearable="false"
        format="YYYY-MM-DD HH:mm"
        value-format="YYYY-MM-DD HH:mm"
        placeholder=""
      ></el-date-picker>
    </div>
    <div v-if="item.columnAttribute.style == 'date'">
      <el-date-picker
        class="w-100%!"
        v-model="scopeRow[item.columnAttribute.prop]"
        type="date"
        :clearable="false"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
        placeholder=""
      ></el-date-picker>
    </div>
    <!-- 时间 -->
    <div v-if="item.columnAttribute.style == 'time'">
      <el-time-picker class="w-100%!" v-model="scopeRow[item.columnAttribute.prop]" format="HH:mm" value-format="HH:mm"></el-time-picker>
    </div>
    <div v-if="item.columnAttribute.style == 'select'">
      <el-select style="width: 100%" v-model="scopeRow[item.columnAttribute.prop]" placeholder="请选择">
        <el-option v-for="(option, index) in item.options" :key="index" :label="option.label" :value="option.value"></el-option>
      </el-select>
    </div>
    <div v-if="item.columnAttribute.style == 'check'">
      <el-checkbox label="" v-model="scopeRow[item.columnAttribute.prop]" />
    </div>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  item: {
    type: Object,
    default: () => {}
  },
  scope: {
    type: Object,
    default: () => {}
  }
});
const emits = defineEmits(["update:scopeRow"]);
const scopeRow = useVModel(props, "scope", emits);
</script>
